import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Clipboard,
    Linking,
    Button,
    Dimensions
} from 'react-native';


import Fetching from "react-async-fetching"
import Loading from './Loading';
import Error from './Error';
import QList from './form/QList';
import { ListItem } from "react-native-elements"
import VideoPlayer from "./components/VideoPlayer"
import { getDetail, getPlayUrl } from "./utils/v"
Fetching.defaultProps = {
    loading: <Loading />,
    error: (props) => <Error {...props} />,
};

export default class VideoDetail extends Component {
    constructor(props) {
        super(props)
        const { route } = props
        if (route) {
            const { params = {} } = route
            this.state = {
                url: params && params.url
            }
        }

    }
    state = {
        url: ""
    }

    async fetch() {
        // const { url = testUrl } = this.state
        // const detail = await getDetail(url)
        return [{ name: "AA" }]
    }
    async getPlayUrl(url) {
        const playUrl = await getPlayUrl(url)
        Clipboard.setString(playUrl)
        Linking.openURL(playUrl)
        // alert(playUrl)
    }
    renderItem(info) {
        const { item } = info;
        return <ListItem
            onPress={this.getPlayUrl.bind(this, item.url)}
            key={item}
            bottomDivider
            title={item.name}>

        </ListItem>
    }
    videoError() {
        alert("AA")
    }
    render() {

        const testUrl = "http://vjs.zencdn.net/v/oceans.mp4"
        // const testUrl = "http://video.jiguangdanci.com/online/mp4-hd/d42f2bea71944aa9ac79c842139646c8/1559723569000-94f0e97f233310a3f18f7bf8bca703b7.mp4"
        return <View style={styles.container}>

            <VideoPlayer url={testUrl}></VideoPlayer>

            <Fetching fetch={this.fetch}>
                {
                    ({ data, loading, error }) => {
                        return <>
                            {data && data.map(ele => {
                                return <Text key={ele}>{ele.name}</Text>
                            })}
                        </>
                    }
                }

            </Fetching>
        </View>

    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});